<template>
  <div>
    <div class="info" ref="info">
      <div class="return">
        <i class="iconfont icon-return"></i>
      </div>
      <canvas id="chartBk" ref="chartBk"></canvas>
      <canvas id="chart" ref="chart"></canvas>
      <img style="opacity: 0" ref="pointer" class="pointer" :src="pointer">
    </div>
    <div class="menu">
      <router-link :to="menu.link" v-for="(menu, index) in menus" :key="index">
        <img :src="menu.img">
        <p>{{menu.title}}</p>
      </router-link>
    </div>
    <div>
      <router-link :to="remindLink" class="remind">
        <img :src="remindImg">
        <div>
          <h3>想知道如何提高丰期额度？</h3>
          <p>点击这里 简单方法告诉你</p>
        </div>
      </router-link>
    </div>
  </div>
</template>
<script>
  import pointerImg from './img/pointer.png'
  import menu1 from './img/menu1.png'
  import menu2 from './img/menu2.png'
  import menu3 from './img/menu3.png'
  import remind from './img/tips.png'
  export default {
    name: 'limit',
    data () {
      return {
        title: '我的额度',
        pointer: pointerImg,
        menus: [
          {img: menu1, title: '认证中心', link: ''},
          {img: menu2, title: '我的丰期', link: ''},
          {img: menu3, title: '常见问题', link: ''}
        ],
        remindImg: remind,
        remindLink: ''
      }
    },
    methods: {
      progress (ratio, imgEle, date, money) {
        let startM = money / (1.4 * ratio / 0.01)
        let startA = 0
        let canvasBk = this.$refs.chartBk
        let canvas = this.$refs.chart
        let ctxBk = canvasBk.getContext('2d')
        let ctx = canvas.getContext('2d')
        let info = this.$refs.info
        let datas = {
          largeW: info.offsetWidth * 2,
          largeH: info.offsetHeight * 2,
          w: window.innerWidth,
          h: info.offsetHeight,
          originX: 0,
          originY: 0,
          angle1: 1.4 * ratio,
          numSpeed: startM
        }
        datas.originX = datas.largeW / 2
        datas.originY = datas.largeH / 2
        canvasBk.width = datas.largeW
        canvasBk.height = datas.largeH
        canvasBk.style.width = datas.w + 'px'
        canvasBk.style.height = datas.h + 'px'
        ctxBk.translate(datas.originX, datas.originY)
        canvas.width = datas.largeW
        canvas.height = datas.largeH
        canvas.style.width = datas.w + 'px'
        canvas.style.height = datas.h + 'px'
        ctx.translate(datas.originX, datas.originY)
        function init () {
          /* 外圆背景 (0.8-2.2), 总1.4 */
          ctxBk.arc(0, 0, 240, 0.8 * Math.PI, 2.2 * Math.PI)
          ctxBk.lineWidth = 2
          ctxBk.strokeStyle = 'rgba(255, 255, 255, .6)'
          ctxBk.stroke()
          /* 内圆虚线 (0.78-2.21), 总1.43 */
          ctxBk.beginPath()
          ctxBk.arc(0, 0, 220, 0.78 * Math.PI, 0.785 * Math.PI)
          ctxBk.lineWidth = 2
          ctxBk.strokeStyle = 'rgba(255, 255, 255, .6)'
          ctxBk.stroke()
          ctxBk.closePath()
          for (let i = 0; i < 284; i = i + 4) {
            ctxBk.beginPath()
            ctxBk.arc(0, 0, 220, (0.8 + i * 0.005) * Math.PI, (0.8 + (i + 1) * 0.005) * Math.PI)
            ctxBk.strokeStyle = '#fff'
            ctxBk.stroke()
            ctxBk.closePath()
          }
          /* 文字 */
          ctxBk.font = '46px Arial'
          ctxBk.textAlign = 'center'
          ctxBk.fillStyle = '#fff'
          ctxBk.fillText('可用额度', 0, -80)
          ctxBk.font = '24px Arial'
          ctxBk.textAlign = 'center'
          ctxBk.fillStyle = '#fff'
          ctxBk.fillText('评估时间：' + date, 0, 60)
        }
        init()
        /* 设置圆点和指针 */
        function rotate () {
          startA += 0.01
          startM += datas.numSpeed
          if (startA > datas.angle1) {
            window.cancelAnimationFrame(rotate)
            return
          }
          canvas.width = datas.largeW
          ctx.translate(datas.originX, datas.originY)
          // console.log(startA)
          /* 外圆背景 (0.8-2.2) */
          ctxBk.beginPath()
          ctxBk.arc(0, 0, 240, 0.8 * Math.PI, (startA + 0.8) * Math.PI)
          ctxBk.lineWidth = 3
          ctxBk.strokeStyle = '#fff'
          ctxBk.stroke()
          ctxBk.closePath()
          /* 文字 */
          ctx.font = '70px Arial'
          ctx.textAlign = 'center'
          ctx.fillStyle = '#fff'
          ctx.fillText('￥' + Math.round(startM), 0, 10)
          /*  */
          ctx.rotate(startA * Math.PI)
          /* 小圆点, 起点的X和Y */
          datas.startX = -Math.cos(0.2 * Math.PI) * 240
          datas.startY = Math.sin(0.2 * Math.PI) * 240
          ctx.beginPath()
          ctx.arc(datas.startX, datas.startY, 5, 0, 2 * Math.PI)
          ctx.shadowBlur = 20
          ctx.shadowColor = '#fff'
          ctx.fillStyle = '#fff'
          ctx.fill()
          ctx.strokeStyle = '#fff'
          ctx.save()
          /* 指针 */
          ctx.drawImage(imgEle, datas.startX + 35, datas.startY - 30)
          window.requestAnimationFrame(rotate)
        }
        rotate()
      }
    },
    created () {
      this.setTitle(this.title)
    },
    mounted () {
      let imgEle = this.$refs.pointer
      this.progress(0.6, imgEle, '2017-05-06', 1111)
    }
  }
</script>
<style lang="scss" scoped>
  @import '../../assets/css/function.scss';
  .info{
    margin-bottom: rem(20);
    position: relative;
    height: rem(640);
    background: url('./img/bk.png') no-repeat;
    background-size: 100% 100%;
    .return{
      position: absolute;
      top: rem(24);
      left: rem(24);
      .iconfont{
        font-size: rem(32);
        color: #fff;
      }
    }
    .bk{
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: rem(240);
    }
    .pointer{
      position: absolute;
      top: rem(370);
      left: rem(180);
      transform: scale(.5);
      transform-origin: rem(373) rem(402);
    }
    canvas{
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  .menu{
    margin-bottom: rem(20);
    background: #fff;
    display: flex;
    padding: rem(25) 0;
    a{
      img{
        display: block;
        margin: 0 auto rem(25) auto;
        width: rem(105);
        height: rem(105);
        border-radius: 50%;
        background: #f5f5f5;
      }
      width: 33.3%;
      text-align: center;
      font-size: rem(28);
      color: #141414;
    }
  }
  .remind{
    display: flex;
    padding: rem(25) rem(60);
    background: #fff;
    img{
      margin-right: rem(50);
      width: rem(170);
      height: rem(140);
    }
    h3{
      margin-top: rem(20);
      margin-bottom: rem(20);
      font-size: rem(32);
      color: #75a9f7;
      font-weight: bold;
    }
    p{
      font-size: rem(26);
      color: #999;
    }
  }
</style>
